import * as React from "react";
import { Row, Col } from "antd";
import ReactEcharts from "echarts-for-react";
import { WebVariable } from "../../../../../data/WebVariable";
export interface EnergyTrendProps {
  dataSouce: any;
}

export interface EnergyTrendState {
  //电日信息数据
  eleDayData: number[];
  //月电信息数据
  eleMonData: number[];
  //月水信息数据
  waterMonData: number[];
  //年水信息数据
  waterYearData: number[];
}
class EnergyTrend extends React.Component<EnergyTrendProps, EnergyTrendState> {
  state = {
    eleDayData: [],
    eleMonData: [],
    waterMonData: [],
    waterYearData: [],
  };
  render() {
    return (
      <div className="EnergyTrend">
        <Row style={{ marginLeft: -12, marginRight: -12, rowGap: 0 }}>
          <Col
            xs={24}
            sm={24}
            md={24}
            lg={12}
            xl={12}
            xxl={12}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Row>
              <Col xs={24} sm={24} md={24} lg={24} xl={24} xxl={12}>
                <div className="chart">
                  <ReactEcharts
                    option={this.getWarnOption(
                      "用电当日逐时趋势",
                      1,
                      1,
                      this.state.eleDayData,
                      "colorBright"
                    )}
                    notMerge={true}
                    lazyUpdate={true}
                    style={{ height: 300 }}
                  />
                </div>
              </Col>
              <Col xs={24} sm={24} md={24} lg={24} xl={24} xxl={12}>
                <div className="chart">
                  <ReactEcharts
                    option={this.getWarnOption(
                      "用电当月逐日趋势",
                      2,
                      1,
                      this.state.eleMonData,
                      "colorObscure"
                    )}
                    notMerge={true}
                    lazyUpdate={true}
                    style={{ height: 300 }}
                  />
                </div>
              </Col>
            </Row>
          </Col>
          <Col
            xs={24}
            sm={24}
            md={24}
            lg={12}
            xl={12}
            xxl={12}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Row>
              <Col xs={24} sm={24} md={24} lg={24} xl={24} xxl={12}>
                <div className="chart">
                  <ReactEcharts
                    option={this.getWarnOption(
                      "用水当月逐日趋势",
                      2,
                      2,
                      this.state.waterMonData,
                      "colorBright"
                    )}
                    notMerge={true}
                    lazyUpdate={true}
                    style={{ height: 300 }}
                  />
                </div>
              </Col>
              <Col xs={24} sm={24} md={24} lg={24} xl={24} xxl={12}>
                <div className="chart">
                  <ReactEcharts
                    option={this.getWarnOption(
                      "用水当年逐月趋势",
                      3,
                      2,
                      this.state.waterYearData,
                      "colorObscure"
                    )}
                    notMerge={true}
                    lazyUpdate={true}
                    style={{ height: 300 }}
                  />
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    );
  }
  shouldComponentUpdate(
    newProps: EnergyTrendProps,
    newState: EnergyTrendState
  ) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      //电日信息数据
      let eleDayData: number[] = [];
      eleDayData.push(newProps.dataSouce.eleData.dayThisList);
      eleDayData.push(newProps.dataSouce.eleData.dayLastList);
      //月电信息数据
      let eleMonData: number[] = [];
      eleMonData.push(newProps.dataSouce.eleData.monthThisList);
      eleMonData.push(newProps.dataSouce.eleData.monthLastList);
      //月水信息数据
      let waterMonData: number[] = [];
      waterMonData.push(newProps.dataSouce.waterData.monthThisList);
      waterMonData.push(newProps.dataSouce.waterData.monthLastList);
      //年水信息数据
      let waterYearData: number[] = [];
      waterYearData.push(newProps.dataSouce.waterData.yearLastList);
      waterYearData.push(newProps.dataSouce.waterData.yearThisList);
      this.setState({ eleDayData, eleMonData, waterMonData, waterYearData });
    }
    return true;
  }
  getWarnOption(
    title: string,
    timeType: number,
    type: number,
    dataScouse?: any[],
    colorstr?: string
  ) {
    let date1 = ["今日", "昨日"];
    let date2 = ["本月", "上月"];
    let date3 = ["本年", "去年"];
    let xdata1 = [
      "0时",
      "1时",
      "2时",
      "3时",
      "4时",
      "5时",
      "6时",
      "7时",
      "8时",
      "9时",
      "10时",
      "11时",
      "12时",
      "13时",
      "14时",
      "15时",
      "16时",
      "17时",
      "18时",
      "19时",
      "20时",
      "21时",
      "22时",
      "23时",
    ];
    let xdata2 = [
      "1日",
      "2日",
      "3日",
      "4日",
      "5日",
      "6日",
      "7日",
      "8日",
      "9日",
      "10日",
      "11日",
      "12日",
      "13日",
      "14日",
      "15日",
      "16日",
      "17日",
      "18日",
      "19日",
      "20日",
      "21日",
      "22日",
      "23日",
      "24日",
      "25日",
      "26日",
      "27日",
      "28日",
      "29日",
      "30日",
      "31日",
    ];
    let xdata3 = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    let data: string[] = [];
    let xdaxta: string[] = [];
    switch (timeType) {
      case 1: //日
        data = date1;
        xdaxta = xdata1;
        break;
      case 2: //月
        data = date2;
        xdaxta = xdata2;
        break;
      case 3: //年
        data = date3;
        xdaxta = xdata3;
        break;
      default:
        break;
    }
    return {
      title: {
        text: title,
      },
      color: colorstr ? WebVariable[colorstr] : ["#4D88FF", "#7700FF"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        bottom: 10,
        data: data,
      },

      grid: {
        left: "3%",
        right: "4%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: xdaxta,
          axisLine: {
            lineStyle: {
              color: "#1890FF",
            },
          },
          axisLabel: {
            show: true,

            textStyle: {
              color: "#1890FF", //更改坐标轴文字颜色
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: type === 1 ? "KW.h" : "m³",
          axisLine: {
            lineStyle: {
              color: "#1890FF",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#1890FF", //更改坐标轴文字颜色
            },
          },
        },
      ],
      series: [
        {
          name: data[0],
          type: "line",
          areaStyle: {},
          data: dataScouse ? dataScouse[0] : [],
        },
        {
          name: data[1],
          type: "line",
          areaStyle: {},
          data: dataScouse ? dataScouse[1] : [],
        },
      ],
    };
  }
}

export default EnergyTrend;
